<template>
  <el-form :model="registry" class="border w-50 mx-auto mt-5">
    <el-form-item>
      <div class="fs-4 mx-auto">学习笔记用户注册</div>
    </el-form-item>
    <el-form-item>
      <img class="mx-auto" src="@/assets/logo.png" style="width: 5rem" />
    </el-form-item>

    <el-form-item>
      <el-input
        class="w-50 mx-auto"
        v-model="registry.username"
        placeholder="用户名"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-input
        class="w-50 mx-auto"
        v-model="registry.password"
        placeholder="密码"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-input
        class="w-50 mx-auto"
        v-model="registry.confirmPass"
        placeholder="确认密码"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-input
        class="w-50 mx-auto"
        v-model="registry.authorName"
        placeholder="昵称"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" class="mx-auto" @click="registryAction">注册</el-button>
    </el-form-item>
    <el-form-item>
    <div class="mx-auto">
      注册表示您愿意并且遵守用户协议和隐私政策</div>
    </el-form-item>
    <el-form-item>
    <div class="text-left mt-3">
      已有账户<router-link to="/login">点击登录</router-link>
    </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "RegistryFrame",
  data() {
    return {
      //注册时，需要绑定的数据
      registry: {
        username: null,
        password: null,
        confirmPass: null,
        authorName: null,
      },
    };
  },
  methods:{
    registryAction(){
      if(this.registry.password == this.registry.confirmPass){
        this.$axios
        .post('/api/registry',this.registry)
        .then(response =>{
          let data = response.data;
          if(data.code==200){
            //跳转到登录页面的首页
            this.$router.push('/login')
          }else{
          alert(data.msg);
        }
        })
      }else{
       alert('两次密码输入不一致')
      }
    }
  }
};
</script>

<style>
</style>